<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>半实物装备信息</title>
	<meta name="description" content="试验装备管理软件">
	<!-- Bootstrap CSS -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<!-- 字体CSS -->
	<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<!-- 自定义样式 -->
	<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

	<link href="assets/plugins/datetimepicker/css/daterangepicker.css" rel="stylesheet" />
	<link rel="stylesheet" href="./assets/layui/css/layui.css">
	<style>
		.content-page{
			margin-top: 50px;
		}
		.content-page form>.layui-row{
			height: 100px ;
			line-height: 100px;
		}
		.info-block{
			margin:15px;
			background: #2a3253;

		}
		.export-Content{
			margin-bottom: 40px;
		}
		.export-Content .layui-form-item{
			height: 100px;
			line-height: 100px;
			padding-top: 30px;
		}
		.info-block .layui-form-item .layui-input-inline{
			width: 80%;
			margin-left: 20px;
			margin-right: 20px;
		}
		.info-block .layui-form-item .layui-input-inline input::placeholder{
			color: #b5b5b5;
		}
		.fileUpload{
			margin-top: 30px;
			padding-left: 20px;

		}
		.fileUpload button{
			color: #b5b5b5;
			background: #343f67;
		}
		.fileUpload p{
			height: 38px;
			line-height: 38px;
			width: 80%;
			background: #343f67;
			color: #b5b5b5;
		}
		.handle-btn{
			color: #95a1ab;
			background: #343f67;
		}
		.export-table{
			margin:15px;
		}
		.export-table .layui-table tr{
			background: #212948;
			border:#343f67 solid 1px;
		}
		.export-table .layui-table-view {
			border: #343f67 solid 1px;
		}
	</style>
</head>

<body class="adminbody">
<div id="main">
	<!-- 头部导航 -->
	<div class="headerbar">
		<!-- LOGO -->
		<div class="headerbar-left">
			<a href="index.html" class="logo">
				<img alt="Logo" src="assets/images/logo.png" />
				<span>试验资源管理软件</span>
			</a>
		</div>

		<nav class="navbar-custom">
			<ul class="list-inline float-right mb-0">
				<li class="list-inline-item dropdown notif">
					<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
					   aria-haspopup="false" aria-expanded="false">
						<i class="fa fa-fw fa-bell-o"></i><span class="notif-bullet"></span>
					</a>
					<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg">
						<!-- item-->
						<div class="dropdown-item noti-title">
							<h5><small><span class="label label-danger pull-xs-right">1</span>消息提醒</small></h5>
						</div>
						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<div class="notify-icon bg-faded">
								<img src="assets/images/avatars/avatar2.png" alt="img"
									 class="rounded-circle img-fluid">
							</div>
							<p class="notify-details">
								<b>Admin</b>
								<span>用户信息注册成功</span>
								<small class="text-muted">3分钟前</small>
							</p>
						</a>
						<!-- All-->
						<a href="#" class="dropdown-item notify-item notify-all">
							查看所有消息
						</a>

					</div>
				</li>

				<li class="list-inline-item dropdown notif">
					<a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button"
					   aria-haspopup="false" aria-expanded="false">
						<img src="assets/images/avatars/admin.png" alt="Profile image" class="avatar-rounded">
					</a>
					<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
						<!-- item-->
						<div class="dropdown-item noti-title">
							<h5 class="text-overflow"><small>Hello, admin</small> </h5>
						</div>

						<!-- item-->
						<a href="pro-profile.html" class="dropdown-item notify-item">
							<i class="fa fa-user"></i> <span>个人中心</span>
						</a>

						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<i class="fa fa-power-off"></i> <span>退出</span>
						</a>
					</div>
				</li>

			</ul>

			<ul class="list-inline menu-left mb-0">
				<li class="float-left">
					<button class="button-menu-mobile open-left">
						<i class="fa fa-fw fa-bars"></i>
					</button>
				</li>
			</ul>

		</nav>

	</div>
	<!-- 头部导航End -->
	<!-- 左侧导航开始 start-->
	<div class="left main-sidebar">
		<div class="sidebar-inner leftscroll">
			<div id="sidebar-menu">
				<ul>
					<li class="submenu">
						<a href="index.html"><i class="fa fa-fw fa-bars"></i><span>首页</span> </a>
					</li>
					<li class="submenu ">
						<a href="#"><i class="fa fa-fw fa-tv"></i> <span>试验资源注册模块</span>
							<span class="menu-arrow"></span>
						</a>
						<ul class="list-unstyled">
							<li><a href="ui-alerts.html">实装信息注册</a></li>
							<li><a href="entityRegister.html">半实物装备信息注册</a></li>
							<li><a href="ui-cards.html">数字仿真模型信息注册</a></li>
							<li><a href="personRegistration.html">人员信息注册</a></li>
							<li><a href="ui-collapse.html">场地信息注册</a></li>
						</ul>
					</li>
					<li class="submenu active">
						<a href="#" class='active'>
							<i class="fa fa-fw fa-table"></i>
							<span> 资源导入导出模块</span>
							<span class="menu-arrow"></span>
						</a>
						<ul class="list-unstyled">
							<li><a href="ui-alerts.html">实装信息</a></li>
							<li class='active'><a href="entityImport.html" >半实物装备信息</a></li>
							<li><a href="ui-cards.html">数字仿真模型信息</a></li>
							<li><a href="ui-carousel.html">人员信息</a></li>
							<li><a href="ui-collapse.html">场地信息</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#"><i class="fa fa-fw fa-file-text-o"></i> <span>试验资源编辑模块</span>
							<span class="menu-arrow"></span>
						</a>
						<ul class="list-unstyled">
							<li><a href="ui-alerts.html">实装信息编辑</a></li>
							<li><a href="ui-buttons.html">半实物装备信息编辑</a></li>
							<li><a href="ui-cards.html">数字仿真模型信息编辑</a></li>
							<li><a href="ui-carousel.html">人员信息编辑</a></li>
							<li><a href="ui-collapse.html">场地信息编辑</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="#">
							<i class="fa fa-fw fa-th"></i>
							<span>综合资源查询模块 </span>
							<span class="menu-arrow"></span>
						</a>
						<ul class="list-unstyled">
							<li><a href="ui-alerts.html">实装信息查询</a></li>
							<li><a href="ui-buttons.html">半实物装备信息查询</a></li>
							<li><a href="ui-cards.html">数字仿真模型信息查询</a></li>
							<li><a href="ui-carousel.html">人员信息查询</a></li>
							<li><a href="ui-collapse.html">场地信息查询</a></li>
						</ul>
					</li>
					<li class="submenu">
						<a href="javascript:;">
							<i class="fa fa-fw fa-area-chart"></i>
							<span> 试验资源监视模块 </span>
							<span class='menu-arrow'></span>
						</a>
						<ul class="list-unstyled">
							<li><a href="ui-alerts.html">实装信息监视</a></li>
							<li><a href="ui-buttons.html">半实物装备信息监视</a></li>
							<li><a href="ui-cards.html">数字仿真模型信息监视</a></li>
							<li><a href="ui-carousel.html">人员信息监视</a></li>
							<li><a href="ui-collapse.html">场地信息监视</a></li>
						</ul>
					</li>
				</ul>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>

		</div>

	</div>
	<!-- End 左侧导航 -->
	<div class="content-page">
		<!-- Start content -->
		<div class="export-Content">
			<h5 style="color: #fff;margin-top: 20px;margin-left: 15px;">
				半实物装备信息导入/导出
			</h5>
			<form action="">
				<div class="layui-row">
					<div class="layui-col-xs6">
						<div class="info-block">
							<div class="layui-form" >
								<div class="layui-form-item" >
									<div class="layui-input-inline " >
										<input type="text" class="layui-input form-control" id="dateRange" placeholder="请选择导出文件日期范围"
											   style="background:#343f67;border-radius: 4px;border:none;">
									</div>
									<label class="layui-form-label layui-btn handle-btn" style="text-align: left;color: #95a1ab;font-size: 1rem;"
											onclick="exportFile()">
										导出
									</label>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-col-xs6">
						<div class="info-block layui-row">
							<div class="fileUpload layui-col-xs10 ">
								<button  class="layui-btn float-left"  onclick="fileUpload()">点击上传：</button>
								<p class="float-left"></p>
							</div>
							<div class="layui-col-xs2">
								<button class="layui-btn handle-btn"  style="font-size:16px;margin-left: 20px;"
										onclick="importFile()">
									导入
								</button>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
		<div class="export-table">
			<h5 style="color: #fff">半实物装备信息导入展示</h5>
			<table class="layui-hide" id="test"></table>
		</div>
	</div>
</div>
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>

<!-- App js -->
<script src="assets/js/pikeadmin.js"></script>
<!-- 验证表单 -->
<script src="assets/plugins/parsleyjs/parsley.min.js"></script>
<script src="assets/plugins/datetimepicker/js/moment.min.js"></script>
<script src="assets/plugins/datetimepicker/js/daterangepicker.js"></script>
<script src="./assets/layui/layui.js" charset="utf-8"></script>
<script>
	var equipmentId=1,layer;//装备id,此处将来需要改动
	var dateRange,uploadFile='';
	var startTime='';
	var endTime='';
	layui.use('layer', function(){
		layer=layui.layer;
	});
	layui.use('laydate', function(){
		var laydate = layui.laydate;
		//日期范围
		laydate.render({
			elem: '#dateRange'
			,range: true,
			done: function(value, date, endDate){
				// console.log(value); //得到日期生成的值，如：2017-08-18
				dateRange=value;
				startTime=`${date.year}-${date.month}-${date.date}`;
				endTime=`${endDate.year}-${endDate.month}-${endDate.date}`;
				// console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				// console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
			}
		});
	})
	//导入成功后列表展示
	function importList(){
		layui.use('table', function(){
			var table = layui.table;
			table.render({
				elem: '#test',
				url:'/rm/hard/findAllHardWare',
				method:'post'
				//,contentType: 'application/json'
				// ,where:{equipmentId}
				,defaultToolbar: []
				,skin:'nob'
				,title: '用户数据表'
				,cols: [[
					// ,{field:'id', title:'ID',  fixed: 'left', width:60,unresize: true,align:'center'}
					{field:'sort', title:'序号', width:60,unresize: true,align:'center',type:'numbers'}
					,{field:'name', title:'名称', }
					,{field:'type', title:'类型'}
					,{field:'number', title:'装备编号',}
					,{field:'unit', title:'研制单位', }
					,{field:'forces', title:'所属部队'}
					,{field:'parameters', title:'输入/输出参数',toolbar: '#paramEdit',align:'center'}
					,{field:'useInfo', title:'使用信息', toolbar: '#useEdit',align:'center'}
				]]
				,page: {
					layout: [ 'prev', 'page', 'next', 'count', 'skip']//自定义分页布局
					,limit:10
					// ,limits:[3,6,9]
					,first: false //不显示首页
					,last: false //不显示尾页
				}
				,request: {
					pageName: 'currentPage' //页码的参数名称，默认：page
					,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				}
				,parseData: function(res){ //res 即为原始返回的数据
					return {
						"code": res.status, //解析接口状态
						"msg": res.msg, //解析提示文本
						"count": res.data.totalCount, //解析数据长度
						"data": res.data.lists //解析数据列表
					};
				}
			});
		});
	}

//	文件上传
	function fileUpload() {
		var input=document.createElement('input');
		input.setAttribute('type', 'file');
		input.setAttribute('accept', 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
		input.click();
		input.onchange=function (e) {
			var file=input.files[0]
			console.log(file);
			$('.fileUpload p').text(file.name);
			uploadFile=file;
		}
	}
// 文件导入
function importFile() {
	var formData=new FormData();
	formData.append('file',uploadFile);
	console.log(uploadFile)
	if (uploadFile){
		$.ajax({
			//请求方式
			type : "post",
			//请求的媒体类型
			contentType: false,
			processData: false,
			//请求地址
			url : "/rm/hard/import",
			//数据，json字符串
			data : formData,
			//请求成功
			success : function(res) {
				if (res.status==0){
					layer.msg('导入成功！',{time:2000});
					importList();
				}else {
					layer.msg('导入失败！',{time:2000});
				}
			},
			error : function(e){
				console.error(e.status);
				console.error(e.responseText);
			}
		});
	}else {
		layer.msg('请选择文件。')
	}
}
//文件导出
	function exportFile() {
		// console.log(startTime,endTime)
		if (startTime&&endTime){
			var a=document.createElement('a');
			a.setAttribute('download', '');// download属性
			a.setAttribute('href',`/rm/hard/export?startTime=${startTime}&endTime=${endTime}`);// href链接
			// console.log(`127.0.0.1:8081/rm/hard/export?startTime=${startTime}&endTime=${endTime}`)
			a.click();
		}else{
			layer.msg('请选择导出文件日期')
		}
	}
</script>
</body>

</html>